<div class="ui grid">
  <div class="ui row">
    <div class="ui column eight wide">
      <h4 class="ui header">
        {{t 'Email Updates are '}}
      </h4>
    </div>
    <div class="ui column eight wide right aligned">
      <UiCheckbox @class="toggle checked" />
    </div>
  </div>
  <div class="ui divider"></div>
  <div class="ui row">
    <div class="ui column sixteen wide">
      <h3 class="ui header">
        {{t 'Updates about events'}}
      </h3>
    </div>
  </div>
</div>
{{#each this.preferences as |preference|}}
  <UiAccordion @class="ui segment">
    <div class="ui grid title">
      <div class="ui column eight wide">
        <h4 class="ui header">{{preference.event.name}}</h4>
      </div>
      <div class="ui column eight wide right aligned">
        <a href="#" class="ui circular label {{if (or preference.newPaper preference.sessionSchedule preference.nextEvent) 'green' 'yellow'}}">
          {{#if (or preference.newPaper preference.sessionSchedule preference.nextEvent)}}
            {{t 'On'}}
          {{else}}
            {{t 'Off'}}
          {{/if}}
        </a>
      </div>
    </div>
    <div class="ui grid content">
      <h4 class="ui header">{{t 'Notifications'}}</h4>
      <div class="ui divided"></div>
      <div class="row">
        <div class="column eight wide">
          {{t 'New Paper is Submitted to your Event'}}
        </div>
        <div class="ui column eight wide right aligned">
          <UiCheckbox @class="toggle" @checked={{preference.newPaper}} @onChange={{pipe-action (action (mut preference.newPaper)) (action "savePreference" preference)}} />
        </div>
      </div>
      <div class="row">
        <div class="column eight wide">
          {{t 'Change in Schedule of Sessions in your Event'}}
        </div>
        <div class="ui column eight wide right aligned">
          <UiCheckbox @class="toggle" @checked={{preference.sessionSchedule}} @onChange={{pipe-action (action (mut preference.sessionSchedule)) (action "savePreference" preference)}} />
        </div>
      </div>
      <div class="row">
        <div class="column eight wide">
          {{t 'Reminder for Next Event'}}
        </div>
        <div class="ui column eight wide right aligned">
          <UiCheckbox @class="toggle" @checked={{preference.nextEvent}} @onChange={{pipe-action (action (mut preference.nextEvent)) (action "savePreference" preference)}} />
        </div>
      </div>
    </div>
  </UiAccordion>
{{else}}
  <div class="ui disabled header">{{t 'No events have been created by the user'}}</div>
{{/each}}